<template>
  <a-form-item :label="title" :name="field" v-bind="formItemProps" v-if="!hidden">
    <slot
      v-if="slotName"
      :name="slotName"
      :disabled="disabled"
      :formData="formData"
      :field="field"
      :value="formData[field]"
      :props="fieldProps"
      :editing="editing"
    />
    <span v-else-if="type === 'display' || !editing">{{ formData[field] }}</span>
    <div v-else-if="type === 'tree'">
      <div class="placeholder" v-if="fieldProps">{{ fieldProps.placeholder || "请选择" }}</div>
      <div class="tree-form-item-content">
        <a-tree v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-tree>
      </div>
    </div>
    <a-radio-group v-else-if="type === 'radioGroup'" v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-radio-group>
    <a-tree-select v-else-if="type === 'treeSelect'" v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-tree-select>
    <a-select v-else-if="type === 'select'" v-model:value="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-select>
    <a-switch v-else-if="type === 'switch'" v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-switch>
    <a-month-picker v-else-if="type === 'month'" v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-month-picker>
    <a-date-picker v-else-if="type === 'date'" v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-date-picker>
    <a-range-picker v-else-if="type === 'range'" v-model="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-range-picker>
    <a-range-picker 
      v-else-if="type == 'monthRange'" 
      format="YYYY-MM"
      :value="formData[field]" 
      v-bind="fieldProps"
      :mode="rangePickerMode"
      @panelChange="(value, mode) => {formData[field] = value; handleRangePickerPanelChange(value, mode);}"
      @openChange="handleRangePickerOpenChange"
      @change="(value)=> formData[field] = value"
    ></a-range-picker>
    <a-input-number v-else-if="type === 'inputNumber'" @keydown="inputNumberOnpress" :disabled="disabled" v-model="formData[field]" v-bind="fieldProps"></a-input-number>
    <a-textarea v-else-if="type === 'textarea'" v-model:value="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-textarea>
    <a-input v-else v-model:value="formData[field]" :disabled="disabled" v-bind="fieldProps"></a-input>
  </a-form-item>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  field: {
    type: String,
    default: () => {}
  },
  fieldProps: {
    type: Object,
    default: () => {}
  },
  type: {
    type: String,
    default: () => {}
  },
  title: {
    type: String,
    default: () => {}
  },
  formItemProps: {
    type: Object,
    default: () => {}
  },
  hidden: {
    type: Boolean,
    default: false
  },
  slotName: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  editing: {
    type: Boolean,
    default: true
  },
})

const rangePickerMode = ref<String[]>(['month', 'month'])

function inputNumberOnpress (event: any) {
  if (!(event.keyCode === 46) && !(event.keyCode === 8) && !(event.keyCode === 37) && !(event.keyCode === 39)) {
    if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) {
      event.returnValue = false
    }
  }
}
function handleRangePickerPanelChange(_: any, mode: String) {
  rangePickerMode.value = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
}
function handleRangePickerOpenChange(open: Boolean) {
  if (open) {
    rangePickerMode.value = ['month', 'month']
  }
}
</script>

<style lang="less" scoped>
.tree-form-item-content {
  height: 300px;
  width: 100%;
  border: 1px solid #ddd;
  overflow: auto;
}
</style>
